<template>
	<view>
		<z-tabs v-if="dataSource.length" :scroll-count="4" :list="dataSource" @change="tabsNavChange" :current="current"
			:active-style="activeStyle" :bar-style="barStyle"></z-tabs>
	</view>
</template>

<script setup>
	import {
		inject,
		onMounted,
		ref,
		toRefs,
		watch,
	} from "vue";
	import {
		getToken
	} from '@/common/user.js'
	import http from '@/common/request.js'
	import {
		useUifo
	} from '@/hooks/useStore';
	import {
		isEmpty
	} from "../common/utils";

	const userinfo = useUifo()

	const props = defineProps({
		// 添加得额外的item选项
		data: {
			type: Array,
			default: []
		},
		current: {
			type: [Number, String],
			default: 0
		}
	})

	const {
		current,
		data
	} = toRefs(props)

	const dataSource = ref([])
	const emit = defineEmits(['navEvent', 'loader'])

	const tabsNavChange = (i, v) => {
		emit('navEvent', {
			index: i,
			data: dataSource.value[i]
		});
	}

	const getData = () => {
		if (getToken()) {
			try {
				http('web/contentType/selectUserContentType', {}).then(res => {
					// 清空tabs 重新渲染 否则底部导航会乱
					dataSource.value = []
					const newRes = data.value.concat(res.data.typeList)
					setTimeout(() => {
						dataSource.value = newRes
						res.data.typeList = newRes
						emit('loader', res.data);
					}, 200)
				})
			} catch (e) {
				//TODO handle the exception
			}
		}
	}

	defineExpose({
		refresh: getData
	})

	watch(userinfo, (n, o) => {
		console.log('o ====> ', o);
		console.log('n ====> ', n);
		if (!isEmpty(n)) getData()
	})

	onMounted(() => {
		getData()
	})
	// 选中的样式
	const activeStyle = {
		// width: '150rpx',
		// height: '60rpx',
		// background: '#6594FF',
		// borderRadius: '30rpx',
		color: '#4f4f4f',
		fontWeight: 'bold',
		// display: 'flex',
		// justifyContent: 'center',
		// alignItems: 'center',
	}

	// 未激活样式
	const inactiveStyle = {
		// width: '200rpx',
		// height: '60rpx',
		// background: '#EBEDF3',
		// borderRadius: '30rpx',
		// color: '#333333',
		// display: 'flex',
		// justifyContent: 'center',
		// alignItems: 'center',
	}

	// 滑块样式
	const barStyle = {
		background: '#4f4f4f',
	}
</script>

<style>

</style>